<template>
  <view class="">
    <u-popup round="20" :show="show" mode="center" :overlay="true" :closeable="false" @close="close">
      <view class="popup-content">
        <view class="popup-title">
          新增分类
        </view>
        <view class="form-content">
          <view class="form-item">
            <view class="label">
              <text>
                上级分类
              </text>
            </view>
            <view class="input">
              <uni-data-picker v-model="selectedClassify" :allow-select-branch="true" :localdata="treeData"
                :map="{text:'classify_name',value:'no'}" popup-title="请选择" @change="treeChecked">
              </uni-data-picker>
            </view>
          </view>
          <view class="form-item">
            <view class="label">
              <text class="text-red">*</text>
              <text>分类名称</text>
            </view>
            <view class="input">
              <uni-easyinput v-model="classify_name" placeholder="请输入分类名称" primaryColor="#38C09E" />
            </view>
          </view>
        </view>
        <view class="flex justify-center align-center padding margin-bottom">
          <button class="button  line-white margin-right" @click="close">取消</button>
          <button class="button " @click="submit()">确定</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    getClassify
  } from '@/common/api/goods.js'
  export default {
    name: "add-classify",
    data() {
      return {
        selectedClassify: "",
        show: false,
        classifyList: [],
        parent_no: "",
        classify_name: "",
        treeData: []
      };
    },
    created() {
      this.getClassify()
    },
    methods: {
      open() {
        this.show = true
      },
      close() {
        this.show = false
      },
      treeChecked(e) {
        console.log(e);
      },
      getClassify() {
        getClassify().then(res => {
          console.log(res);
          this.treeData = res
        })
      },
      async submit() {
        if (!this.classify_name) {
          uni.showToast({
            title: '分类名称不能为空',
            icon: 'none'
          })
          return
        }
        const url = '/retail/operate/srvretail_goods_classify_add'
        const req = [{
          "serviceName": "srvretail_goods_classify_add",
          "condition": [],
          "data": [{
            "parent_no": this.selectedClassify,
            "classify_name": this.classify_name,
          }]
        }]
        const res = await this.$http.post(url, req)
        if (res?.data?.state === 'SUCCESS') {
          uni.showToast({
            title: '新增成功',
          })
          this.show = false
          this.$emit('success')
          this.selectedClassify = ''
          this.classify_name=''
        } else if (res.data?.resultMessage) {
          uni.showToast({
            title: res.data?.resultMessage,
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: '新增失败，请重试',
            icon: 'none'
          })
        }
      },
    },

  }
</script>

<style lang="scss">
  .popup-content {
    width: 30vw;
    min-height: 60vh;
    display: flex;
    flex-direction: column;

    .form-content {
      padding: 0 2rem 2rem;
      flex: 1;
      font-size: 2.4rem;

      .form-item {
        margin: 0 0 2rem;

      }

      .label {
        font-weight: bold;
        margin-bottom: 1rem;
      }
    }
  }
</style>
